<template>
    <div>
        <ul ref="listRef">
            <li v-for="(item, index) in navItems" :key="index" @click="setCurrentIndex(item, index)"
                :class="{ active: currentIndex === index }">{{ item }}</li>
            <div class="underline"
                :style="{ left: currentIndex * liWidth + (liWidth / 4) + 40 + 'px', width: liWidth / 2 + 'px' }"></div>
        </ul>
        <NuxtPage></NuxtPage>
    </div>
</template>

<script setup>

const navItems = ['Home', 'About', 'Services', 'Contact']
const currentIndex = ref(0)
const listRef = ref(null)
const liWidth = ref(0)
const router = useRouter()
function setCurrentIndex(item, index) {
    console.log(index)
    currentIndex.value = index;
    if (item === 'Home') {
        router.push(`/about`)
    } else {
        router.push(`/about/${item}`)
    }

}

onMounted(() => {

    const liElement = listRef.value.querySelector('li');
    if (liElement) {
        liWidth.value = liElement.offsetWidth;
        const LiHeight = liElement.offsetHeight;
        console.log('LI Width:', liWidth, 'Height:', LiHeight);
    }

});

</script>

<style>
ul {
    display: flex;
    list-style: none;
    position: relative;
}

li {
    cursor: pointer;
    text-align: center;
    width: 80px;
    padding: 10px;
}

.active {
    font-weight: bold;
}

.underline {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: blue;
    transition: left 0.3s;
}
</style>
